import { computed, defineComponent, inject, onMounted, ref } from "vue"

export default defineComponent({
	props: {
		item: Object, // json中的 blocks
	},
	setup(props) {
		const config = inject("config")
		// console.log(147,config);
		const itemStyle = computed(() => ({
			top: `${props.item.top}px`,
			left: `${props.item.left}px`,
			zIndex: `${props.item.zIndex}`,
		}))
		var itemRef = ref(null)
		onMounted(() => {
			
			//调整控件位置:控件左上角偏移到控件中心
			let { offsetWidth, offsetHeight } = itemRef.value
			if (props.item.selfAlignCenter) {
				props.item.left = props.item.left - offsetWidth / 2
				props.item.top = props.item.top - offsetHeight / 2
				props.item.selfAlignCenter = false
			}
		})
		// console.log(111,props.item);
		return () => {
			const component = config.componentMap[props.item.key]
			const RenderComponent = component.render({
				props: props.item.props,
			})
			return (
				<div className='div-item' style={itemStyle.value} ref={itemRef}>
					{RenderComponent}
				</div>
			)
		}
	},
})
